<template>
  <div class="wapper">
    <div class="headerBB">
      <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 42C11.2091 42 13 40.2091 13 38C13 35.7909 11.2091 34 9 34C6.79086 34 5 35.7909 5 38C5 40.2091 6.79086 42 9 42Z" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M9 14C11.2091 14 13 12.2092 13 10C13 7.79086 11.2091 6 9 6C6.79086 6 5 7.79086 5 10C5 12.2092 6.79086 14 9 14Z" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M9 28C11.2091 28 13 26.2092 13 24C13 21.7908 11.2091 20 9 20C6.79086 20 5 21.7908 5 24C5 26.2092 6.79086 28 9 28Z" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M21 24H43" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 38H43" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 10H43" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <span style="margin-left: 10px">手机进程 <span style="font-size: 15px;">({{total}}个)</span></span>
    </div>
    <el-divider style="margin-top: 0px !important"></el-divider>
    <!-- <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="名称" width="300"> </el-table-column>
      <el-table-column prop="name" label="状态" width="180"> </el-table-column>
      <el-table-column prop="CPU" label="CPU"> </el-table-column>
      <el-table-column prop="内存" label="内存"> </el-table-column>
      <el-table-column prop="磁盘" label="磁盘"> </el-table-column>
      <el-table-column prop="网络" label="网络"> </el-table-column>
      <el-table-column prop="GPU" label="GPU"> </el-table-column>
      <el-table-column prop="CPU引擎" label="CPU引擎"> </el-table-column>
    </el-table> -->
    <div class="systemHeader" >
        <div class="titleboxl" style="width:30%">名称</div>
        <div class="titleboxl" style="width:10%">PID</div>
        <div class="titleboxl" style="width:10%">PPID</div>
        <div class="titleboxl" style="width:10%">用户</div>
        <div class="titleboxl" style="width:10%">内存</div>
        <div class="titleboxl" style="width:30%">CMDLINE</div>
      </div>
    <div class="taskAdminSystem">
      <div class="listContent">
        <a-collapse v-model="activeKey" accordion>
          <a-collapse-panel v-for="(item,index) in tableData" :key="index" :show-arrow="item.children?true:false">
            <template slot="header" >

              <div class="systemHeader2">
                <svg t="1686301238942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7670" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M443.73333333 921.6a34.13333333 34.13333333 0 0 1 0 68.26666667H139.776C81.23733333 989.86666667 34.13333333 941.4656 34.13333333 882.21013333V141.78986667C34.13333333 82.5344 81.23733333 34.13333333 139.776 34.13333333h607.91466667C806.22933333 34.13333333 853.33333333 82.5344 853.33333333 141.78986667v194.62826666a34.13333333 34.13333333 0 0 1-68.26666666 0V141.78986667C785.06666667 119.808 768.1024 102.4 747.69066667 102.4H139.776c-20.41173333 0-37.376 17.408-37.376 39.38986667v740.42026666C102.4 904.192 119.36426667 921.6 139.776 921.6H443.73333333z" fill="#333303" p-id="7671"></path><path d="M750.93333333 989.86666667a273.06666667 273.06666667 0 1 1 0-546.13333334 273.06666667 273.06666667 0 0 1 0 546.13333334z m0-68.26666667a204.8 204.8 0 1 0 0-409.6 204.8 204.8 0 0 0 0 409.6z" fill="#333303" p-id="7672"></path><path d="M768 699.73333333h84.75306667a34.13333333 34.13333333 0 1 1 0 68.26666667H733.86666667a34.13333333 34.13333333 0 0 1-34.13333334-34.13333333v-102.4a34.13333333 34.13333333 0 0 1 68.26666667 0v68.26666666zM273.06666667 341.33333333a34.13333333 34.13333333 0 0 1 0-68.26666666h341.33333333a34.13333333 34.13333333 0 0 1 0 68.26666666H273.06666667z m0 273.06666667a34.13333333 34.13333333 0 0 1 0-68.26666667h68.26666666a34.13333333 34.13333333 0 0 1 0 68.26666667h-68.26666666z" fill="#333303" p-id="7673"></path></svg>
                <div class="titleboxl2" style="width:30%">{{ item.NAME }}<span style="font-size:13px;" v-if="item.children"> ({{ item.children.length }})</span></div>
                <div class="titleboxl2" style="width:10%">{{ item.PID }}</div>
                <div class="titleboxl2" style="width:10%">{{ item.PPID }}</div>
                <div class="titleboxl2" style="width:10%">{{ item.USER }}</div>
                <div class="titleboxl2" style="width:10%"></div>
                <div class="titleboxl2" style="width:30%">{{ item.CMDLINE }}</div>
              </div>
            </template>
            <!-- <div class="contentBBBB" v-if="item.children">
              <div  class="systemHeader2 overItem" style="min-height:30px;border-bottom:1px solid #e1e1e1;line-height:30px;padding-left:55px;" v-for="(data,j) in item.children" :key="j">
                <div class="titleboxl2" style="width:30%;">{{ data.NAME }}</div>
                <div class="titleboxl2" style="width:10%;">{{ data.PID }}</div>
                <div class="titleboxl2" style="width:10%;">{{ data.PPID }}</div>
                <div class="titleboxl2" style="width:10%;">{{ data.USER }}</div>
                <div class="titleboxl2" style="width:10%;">{{ data.VSZ }} Byte</div>
                <div class="titleboxl2" style="width:30%;">{{ data.CMDLINE }}</div>
              </div>
            </div> -->
            <!-- 第二层 -->
              <a-collapse default-active-key="4" v-if="item.children" :showArrow="false">
              <a-collapse-panel  v-for="(data,j) in item.children" :key="j" :show-arrow="data.children?true:false">
                <template slot="header" >
                  <div class="systemHeader2">
                    <div class="titleboxl2" style="width:30%">{{ data.NAME }}<span style="font-size:13px;" v-if="data.children"> ({{ data.children.length }})</span></div>
                    <div class="titleboxl2" style="width:10%">{{ data.PID }}</div>
                    <div class="titleboxl2" style="width:10%">{{ data.PPID }}</div>
                    <div class="titleboxl2" style="width:10%">{{ data.USER }}</div>
                    <div class="titleboxl2" style="width:10%">{{ data.VSZ }} Byte</div>
                    <div class="titleboxl2" style="width:30%">{{ data.CMDLINE }}</div>
                  </div>
                </template>
                <!-- 第三层 -->
                    <a-collapse default-active-key="5" v-if="data.children" :showArrow="false">
                      <a-collapse-panel  v-for="(d,i) in data.children" :key="i" :show-arrow="d.children?true:false">
                        <template slot="header" >
                          <div class="systemHeader2">
                            <div class="titleboxl2" style="width:30%">{{ d.NAME }}<span style="font-size:13px;" v-if="d.children">({{ d.children.length }})</span></div>
                            <div class="titleboxl2" style="width:10%">{{ d.PID }}</div>
                            <div class="titleboxl2" style="width:10%">{{ d.PPID }}</div>
                            <div class="titleboxl2" style="width:10%">{{ d.USER }}</div>
                            <div class="titleboxl2" style="width:10%">{{ d.VSZ }} Byte</div>
                            <div class="titleboxl2" style="width:30%">{{ d.CMDLINE }}</div>
                          </div>
                        </template>

                            <!-- 第四层 -->
                            <a-collapse default-active-key="5" v-if="d.children" :showArrow="false">
                              <a-collapse-panel  v-for="(e,y) in d.children" :key="y" :show-arrow="e.children?true:false">
                                <template slot="header" >
                                  <div class="systemHeader2">
                                    <div class="titleboxl2" style="width:30%">{{ e.NAME }}<span style="font-size:13px;" v-if="e.children">({{ d.children.length }})</span></div>
                                    <div class="titleboxl2" style="width:10%">{{ e.PID }}</div>
                                    <div class="titleboxl2" style="width:10%">{{ e.PPID }}</div>
                                    <div class="titleboxl2" style="width:10%">{{ e.USER }}</div>
                                    <div class="titleboxl2" style="width:10%">{{ e.VSZ }} Byte</div>
                                    <div class="titleboxl2" style="width:30%">{{ e.CMDLINE }}</div>
                                  </div>
                                </template>
                                  <!-- 第五层 -->
                                  <a-collapse default-active-key="5" v-if="e.children" :showArrow="false">
                                  <a-collapse-panel  v-for="(f,g) in e.children" :key="g" :show-arrow="f.children?true:false">
                                    <template slot="header" >
                                      <div class="systemHeader2">
                                        <div class="titleboxl2" style="width:30%">{{ f.NAME }}<span style="font-size:13px;" v-if="f.children">({{ d.children.length }})</span></div>
                                        <div class="titleboxl2" style="width:10%">{{ f.PID }}</div>
                                        <div class="titleboxl2" style="width:10%">{{ f.PPID }}</div>
                                        <div class="titleboxl2" style="width:10%">{{ f.USER }}</div>
                                        <div class="titleboxl2" style="width:10%">{{ f.VSZ }} Byte</div>
                                        <div class="titleboxl2" style="width:30%">{{ f.CMDLINE }}</div>
                                      </div>
                                    </template>
                                  </a-collapse-panel>
                                </a-collapse>
                              </a-collapse-panel>
                            </a-collapse>
                      </a-collapse-panel>
                    </a-collapse>
              </a-collapse-panel>
            </a-collapse>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { getRxTmpPathApi } from '@/api/phoneInfo/index'
export default {
  name: "table",
  components: {
    },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      size: 20,
      current: 1,
      activeKey:['1'],
      text:'123',
      isActive:0,
      // s:'ppid等于0是根节点,如果有项ppid等于另一项的pid则视为另一项为该项的父节点请帮我格式化数据',
      customStyle:'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden'
    };
  },
  created() {
    this.INITfUNCTION();
  },
  mounted(){
  },
  methods: {
 
    INITfUNCTION(){
      // console.log(this.$route.params.nodeData)
      let node = this.$route.params.nodeData.data;
      let dataJson = {
        "proof_num":node.proof_num,
        "rxTmpPath":'/'+node.subtype
      }
      getRxTmpPathApi(dataJson).then(res=>{
        if(!res.data)return
        const input = res.data;

        const lines = input.split("\n");
      const result = [];

      for (const line of lines) {
        const parts = line.trim().split(/\s+/);
        const item = {
          NAME: parts[0],
          PID: parseInt(parts[1], 10),
          PPID: parseInt(parts[2], 10),
          USER: parts[3],
          VSZ: parts[4],
          CMDLINE: parts[5],
        };
        if(item.PID){
          result.push(item);
        }
      }
      const jsonOutput = JSON.parse(JSON.stringify(result, null, 2));
      this.total = jsonOutput.length;

function formatData(data) {
    const formattedData = {};

    // Create a mapping of PID to process data
    const processData = {};
    jsonOutput.forEach(item => {
        const { PID } = item;
        processData[PID] = item;
    });

    // Build the hierarchical structure
    jsonOutput.forEach(item => {
        const { PID, PPID } = item;
        const parent = processData[PPID];
        
        if (parent) {
            parent.children = parent.children || [];
            parent.children.push(item);
        } else {
            formattedData[PID] = item;
        }
    });

    return formattedData;
}

const formattedData = formatData(jsonOutput);
    this.tableData = formattedData;
      }).catch(error=>{
        
      })
    },
    handleSizeChange(val) {
      this.size = val;
    },
    handleCurrentChange(val) {
      this.current = val;
    },
  },
};
</script>

<style lang="scss">
.contentBBBB{
  height:570px;overflow-y: auto;
}
.overItem{
  cursor: pointer;
}
.overItem:hover{
  background:#cbeafa;
}
.wapper {
  // width: 90%;
  // border: 1px solid red;
  // margin: 0 auto;
  padding: 10px;
  padding-top: 0;
}
.headerBB {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  padding-left: 10px;
  font-weight: bold;
  position: relative;
  display: flex;
  align-items: center;
}
.lineHeader {
  position: absolute;
  width: 10px;
  height: 80px;
  left: 0;
  background: #1faef5;
}
.taskAdminSystem{
  height: 750px;
  overflow-y: auto;
  border: 1px solid rgb(215, 215, 215);
  position: relative;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.systemHeader{
  height:60px;
  border: 1px solid #ebebeb;
  display: flex;
}
.systemHeader2{
  width: auto;
  min-height:17px;
  display: flex;
  margin-left:22px;
}
.titleboxl{
  border-bottom: 1px solid rgb(206, 205, 205);
  border-right:1px solid rgb(206, 205, 205);
  height: 100%;
  line-height: 60px;
  font-size: 20px;
  padding-left:20px;
}
.titleboxl2{
  min-height: 100%;
  line-height: 30px;
  font-size: 15px;
  padding-left:10px;
  word-wrap: break-word;
}
// .systemHeader3{
//   min-height: 30px;
//   line-height: 30px;
//   font-size: 20px;
//   padding-left:10px;
// }
@media screen and (min-width: 2360px) {
  .taskAdminSystem{
  height: 67vh;
  overflow-y: auto;
  border: 1px solid rgb(180, 180, 180);
  position: relative;
}
.contentBBBB{
  height:50vh;overflow-y: auto;
}

}

</style>